// 空状态图片资源配置
// 由于无法直接创建图片文件，这里提供SVG图标代码和使用说明

const emptyStateIcons = {
  // 空购物车
  'empty-cart': {
    svg: `
      <svg width="80" height="80" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
        <path fill="#E5E5E5" d="M160 224h96l64 336h448l96-256H304l-12.8-64H160c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/>
        <circle cx="384" cy="832" r="40" fill="#E5E5E5" />
        <circle cx="768" cy="832" r="40" fill="#E5E5E5" />
      </svg>
    `,
    description: '空购物车状态图标'
  },

  // 空消息
  'empty-message': {
    svg: `
      <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
        <rect x="15" y="25" width="50" height="35" rx="5" stroke="#E5E5E5" stroke-width="2" fill="none"/>
        <path d="M30 60L40 50L50 60" stroke="#E5E5E5" stroke-width="2" fill="none"/>
        <circle cx="30" cy="38" r="2" fill="#E5E5E5"/>
        <circle cx="40" cy="38" r="2" fill="#E5E5E5"/>
        <circle cx="50" cy="38" r="2" fill="#E5E5E5"/>
        <path d="M25 45H55" stroke="#F0F0F0" stroke-width="1"/>
        <path d="M25 48H45" stroke="#F0F0F0" stroke-width="1"/>
      </svg>
    `,
    description: '空消息状态图标'
  },

  // 空搜索结果
  'empty-search': {
    svg: `
      <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
        <circle cx="35" cy="35" r="20" stroke="#E5E5E5" stroke-width="2" fill="none"/>
        <path d="M51 51L65 65" stroke="#E5E5E5" stroke-width="2"/>
        <path d="M28 28L42 42" stroke="#F0F0F0" stroke-width="2"/>
        <path d="M42 28L28 42" stroke="#F0F0F0" stroke-width="2"/>
        <text x="40" y="75" font-size="8" fill="#CCCCCC" text-anchor="middle">无结果</text>
      </svg>
    `,
    description: '空搜索结果状态图标'
  },

  // 空订单
  'empty-order': {
    svg: `
      <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
        <rect x="20" y="15" width="40" height="50" rx="3" stroke="#E5E5E5" stroke-width="2" fill="none"/>
        <path d="M25 25H55M25 35H55M25 45H45" stroke="#F0F0F0" stroke-width="1"/>
        <circle cx="30" cy="55" r="2" fill="#F0F0F0"/>
        <circle cx="50" cy="55" r="2" fill="#F0F0F0"/>
        <path d="M35 52L40 57L50 47" stroke="#E5E5E5" stroke-width="1.5" fill="none"/>
      </svg>
    `,
    description: '空订单状态图标'
  },

  // 网络错误
  'network-error': {
    svg: `
      <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
        <circle cx="40" cy="40" r="30" stroke="#E5E5E5" stroke-width="2" fill="none"/>
        <path d="M30 30L50 50M50 30L30 50" stroke="#FF6B6B" stroke-width="2"/>
        <text x="40" y="75" font-size="8" fill="#CCCCCC" text-anchor="middle">网络异常</text>
      </svg>
    `,
    description: '网络错误状态图标'
  },

  // 暂无数据
  'no-data': {
    svg: `
      <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
        <rect x="25" y="20" width="30" height="40" rx="2" stroke="#E5E5E5" stroke-width="2" fill="none"/>
        <circle cx="40" cy="40" r="8" stroke="#F0F0F0" stroke-width="1" fill="none"/>
        <path d="M37 37L43 43M43 37L37 43" stroke="#F0F0F0" stroke-width="1"/>
        <path d="M30 65H50" stroke="#E5E5E5" stroke-width="2"/>
      </svg>
    `,
    description: '暂无数据状态图标'
  }
};

// 使用说明
console.log('空状态图片资源配置完成');
console.log('建议：');
console.log('1. 将SVG代码转换为80x80px的PNG图片');
console.log('2. 保存到 static/images/ 目录下');
console.log('3. 颜色主要使用 #E5E5E5 和 #F0F0F0 保持简洁风格');
console.log('4. 图片应该保持透明背景');

export default emptyStateIcons;